<template>
	<view class="flex-column-view">
		<image class="bg-img" src="/src/static/logo.png" mode="widthFix"></image>
		<view class="flex-1 content">
			<view class="title">请选择您的身份</view>
			<view class="card card-1" @click="toIndex">
				<view class="left-content">
					<view class="name">我是消费者</view>
					<view class="desc">查看我的<text class="text-orange">推广奖励</text>、订单信息。</view>
				</view>
				<image class="img" src="https://free.picui.cn/free/2025/10/12/68eb4a9e5478a.png" mode="aspectFill"></image>
			</view>
			<view class="card card-2" @click="toMerchant">
				<view class="left-content">
					<view class="name">我是商家</view>
					<view class="desc">定制<text class="text-bule">优质服务</text>，让更多人发现。</view>
				</view>
				<image class="img" src="https://free.picui.cn/free/2025/10/12/68eb4a9decbe2.png" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
const toIndex = () => {
	uni.switchTab({
		url: '/pages/index/index'
	})
}
const toMerchant = () => {
	uni.showToast({
		icon: 'none',
		title: '敬请期待~',
	});
}
</script>

<style lang="scss" scoped>
	.flex-column-view {
		position: relative;
		z-index: 1;
	}
	.bg-img {
		width: 100%;
		height: 596rpx;
		z-index: -1;
	}
	.content {
		position: relative;
		margin-top: -76rpx;
		border-radius: 30rpx 30rpx 0 0;
		background-color: #EDF3FF;
		&::before {
			content: '';
			position: absolute;
			z-index: -1;
			left: 0;
			right: 0;
			top: -34rpx;
			width: 100%;
			height: 76rpx;
			border-radius: 30rpx 30rpx 0 0;
			background: linear-gradient(90deg, #cce1ff 0%, #8fbdff 100%);
		}
		.title {
			text-align: center;
			font-size: 32rpx;
			font-weight: 700;
			margin: 40rpx 0 68rpx;
		}
		.card {
			margin: 0 42rpx 62rpx;
			padding: 32rpx;
			height: 256rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			gap: 16rpx;
			.left-content {
				flex: 1;
				.name {
					font-size: 40rpx;
					font-weight: 700;
					margin-bottom: 10rpx;
				}
				.desc {
					font-size: 28rpx;
					font-weight: 700;
					color: #B3B3B3;
				}
				.text-orange {
					color: #FF9538;
				}
				.text-bule {
					color: #2789E6;
				}
			}
			.img {
				width: 164rpx;
				height: 164rpx;
			}
		}
		.card-1 {
			background: linear-gradient(132.24deg, #FFFFFF 0%, #FFE2BF 100%);
			box-shadow: 0rpx 4rpx 6rpx rgba(255, 195, 0, 0.15);
		}
		.card-2 {
			background: linear-gradient(227.1deg, #C9DDFF 0%, #FFFFFF 100%);
			box-shadow: 0rpx 4rpx 6rpx rgba(77, 127, 255, 0.15);
		}
	}
</style>
